<template>
    <div class="dataManage">
        <div class="dataManage-tool">
            <div class="toolsBG" style="float:left">
                <div>
                    <img src="@/assets/img/ztj_icon.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">数据管理</span>
                </div>
                <hr style='border:0.1px inset #E9E9E9;'>
                <div class="totalnum">
                    <div class="dataManage-type" v-for="(item,index) in dataTypeCountList" :key="index" style="border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                        <div class="titleNum"> {{item.dataType}}/<label style="font-size:14px">数量</label></div>
                        <div class="num">{{item.count}}</div>
                    </div>
                </div>
            </div>  
        </div>
        <div class="dataManage-table">
            <div class="tableBG" style="float:left">
                <div>
                    <span style="float:left;width:500px">
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="height:48px">
                            <el-tab-pane name="first">
                                <span slot="label" style="font-size:16px"><i class="el-icon-date"></i>商品数据</span>
                            </el-tab-pane>
                            <el-tab-pane name="second">
                                <span slot="label" style="font-size:16px"><i class="el-icon-date"></i>装备经济性数据</span>
                            </el-tab-pane>
                            <el-tab-pane name="three">
                                <span slot="label" style="font-size:16px"><i class="el-icon-date"></i>美国国防部数据</span>
                            </el-tab-pane>
                        </el-tabs>
                    </span>
                    <span style="margin-left:5px;height:40px;line-height:40px;font-size:12px;color:rgba(0,0,0,0.45);">数据共计<label style="color:#8AA7ED">：{{total}}</label>条</span>
                    <span v-if="isExport" style="float:right;margin-right:1.3%;height:40px;line-height:40px">
                        <el-button type="goon" icon="el-icon-download" size="mini" style="border-color:#1890FF;color: #8AA7ED;" @click="downloadClick"> 导出 </el-button>
                    </span>
                    <span v-else style="float:right;margin-right:1.3%;height:40px;line-height:40px"></span>
                    <span style="float:right;margin-right:1.3%;height:40px;line-height:40px">
                        <el-input size="mini" placeholder="请输入" v-model="input" class="input-with-select" style="width:272px" @keyup.enter.native="searchClick()"> 
                            <el-button size="mini" slot="append" icon="el-icon-search" @click="searchClick()"></el-button>
                        </el-input>
                    </span>
                </div>
                <hr style='border:0.1px inset #E9E9E9;'>
                <div class="list" >
                    <!-- 商品 -->
                    <el-table v-if="activeName=='first'" :data="tableData" :header-cell-style="{background: 'rgba(118,201,241,0.10)',color: 'rgba(0,0,0,0.65)'}">
                        <el-table-column prop="" label="序号" type="index" width="80" align="center"> 
                            <template slot-scope="scope">
                                <span>{{scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dataAddress1" label="数据地址" width="230" align="center"> </el-table-column>
                        <el-table-column prop="websiteName" label="网站名称" align="center"> </el-table-column>
                        <el-table-column prop="dataType" label="数据类型" align="center"> </el-table-column>
                        <el-table-column prop="title" label="标题" width="200" align="center"> </el-table-column>
                        <el-table-column prop="brand" label="品牌" align="center"> </el-table-column>
                        <el-table-column prop="model" label="型号" align="center"> </el-table-column>
                        <el-table-column prop="number" label="编号" align="center"> </el-table-column>
                        <el-table-column prop="specification" label="规格" align="center"> </el-table-column>
                        <el-table-column prop="placeOfOrigin" label="产地" align="center"> </el-table-column>
                        <el-table-column prop="materialQuality" label="材质" align="center"> </el-table-column>
                        <el-table-column prop="price" label="价格" align="center"> </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="checkClick(scope.row)" type="text" size="small" :disabled="isCheck">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 装备经济性 -->
                    <el-table v-else-if="activeName=='second'" :data="tableData" :header-cell-style="{background: 'rgba(118,201,241,0.10)',color: 'rgba(1,0,0,0.65)'}">
                        <el-table-column prop="" label="序号" width="80" align="center">
                             <template slot-scope="scope">
                                <span>{{scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dataAddress1" label="数据地址" align="center"> </el-table-column>
                        <el-table-column prop="websiteName" label="网站名称" align="center"> </el-table-column>
                        <el-table-column prop="dataType" label="数据类型"  align="center"> </el-table-column>
                        <el-table-column prop="title" label="标题" align="center"> </el-table-column>
                        <el-table-column prop="author" label="作者" align="center"> </el-table-column>
                        <el-table-column prop="text1" label="正文" width="280" align="center"> </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template v-if="activeName=='second'" slot-scope="scope">
                                <el-button @click="checkClick1(scope.$index,scope.row)" type="text" size="small" :disabled="isCheck">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                    <!-- 美国国防部 -->
                    <div v-else-if="activeName=='three'" style="height:750px;">
                        <DataUSA :tableData="tableData" @getChild='getSuccess'></DataUSA>
                    </div>
                    
                </div>
                <!-- 分页 -->
                <div class="block" style="width:100%;text-align:right;margin-top:10px">
                    <el-pagination @current-change="handleCurrentChange" :current-page="searchData.page"
                    :page-size="searchData.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 查看 -->
        <!-- 商品数据 -->
        <el-dialog width="1200px" :visible.sync="dialogVisible" style="border-radius:4px;">
            <el-form :model="dataForm" ref="dataForm" size="small" style="text-align:left;">
                <div style="font-size:22px;font-weight:bold;text-align:center">商品数据详情页</div>
                <div style="font-size:18px;font-weight:bold;margin-top:10px;margin-left:10px">采集信息</div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">网站名称：</label>{{dataForm.websiteName}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">爬虫名称：</label>{{dataForm.spiderName}}</div></el-col>
                    <el-col :span="8"><div></div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">数据源类型：</label>{{dataForm.dataSourceType}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">数据类型：</label>{{dataForm.dataType}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">采集方式：</label>{{dataForm.collectionMode}}</div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">发布时间：</label>{{dataForm.publishTime}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">采集时间：</label>{{dataForm.collectionTime}}</div></el-col>
                    <el-col :span="8"><div></div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:60px">
                    <el-col :span="1.5"><div><label style="font-weight:bold">数据地址：</label></div></el-col>
                    <el-col :span="21"><a :href="dataForm.dataAddress" target="_blank">{{dataForm.dataAddress}}</a></el-col>
                </div>
                <hr style='border:0.1px inset #E9E9E9;'>
                <div style="font-size:18px;font-weight:bold;margin-top:20px;margin-left:10px">基础信息</div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px">
                    <el-col :span="1.5"><div><label style="font-weight:bold">标题：</label></div></el-col>
                    <el-col :span="21">{{dataForm.title}}</el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px">
                    <el-col :span="1.5"><div><label style="font-weight:bold">品牌：</label></div></el-col>
                    <el-col :span="21">{{dataForm.brand}}</el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">型号：</label>{{dataForm.model}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">编号：</label>{{dataForm.number}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">规格：</label>{{dataForm.placeOfOrigin}}</div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:60px">
                    <el-col :span="8"><div><label style="font-weight:bold">产地：</label>{{dataForm.placeOfOrigin}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">材质：</label>{{dataForm.materialQuality}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">价格：</label>{{dataForm.price}}</div></el-col>
                </div>
                <!-- <hr style='border:0.1px inset #E9E9E9;'> -->
                <div style="height:40px"></div>
            </el-form>
        </el-dialog>
        <!-- 装备经济性数据 -->
        <el-dialog width="1200px" :visible.sync="dialogVisible1">
            <el-form :model="dataForm1" ref="dataForm1" label-width="10px" size="small" style="text-align:left;">
               <div style="font-size:22px;font-weight:bold;text-align:center">装备经济性详情页</div>
                <div style="font-size:18px;font-weight:bold;margin-top:10px;margin-left:10px">采集信息</div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">网站名称：</label>{{dataForm1.websiteName}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">爬虫名称：</label>{{dataForm1.spiderName}}</div></el-col>
                    <el-col :span="8"><div></div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">数据源类型：</label>{{dataForm1.dataSourceType}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">数据类型：</label>{{dataForm1.dataType}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">采集方式：</label>{{dataForm1.collectionMode}}</div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;height:40px;line-height:40px">
                    <el-col :span="8"><div><label style="font-weight:bold">发布时间：</label>{{dataForm1.publishTime}}</div></el-col>
                    <el-col :span="8"><div><label style="font-weight:bold">采集时间：</label>{{dataForm1.collectionTime}}</div></el-col>
                    <el-col :span="8"><div></div></el-col>
                </div>
                <div style="font-size:16px;margin-top:10px;margin-left:10px;min-height:80px">
                    <el-col :span="1.5"><div><label style="font-weight:bold">数据地址：</label></div></el-col>
                    <el-col :span="21">
                        <!-- <template v-for="addressData in addressDataArr>
                            <a :href="dataForm1.dataAddress" target="_blank">{{dataForm1.dataAddress}}</a><br>
                        </template> -->
                        <a :href="dataForm1.dataAddress" target="_blank">{{dataForm1.dataAddress}}</a><br>
                    </el-col>
                </div>
                <hr style='border:0.1px inset #E9E9E9;'>
                <div style="font-size:18px;font-weight:bold;margin-top:20px;margin-left:10px">基础信息</div>
                <el-form-item style="font-size:18px;margin-top:10px"> <label style="font-weight:bold">标题：</label> {{dataForm1.title}} </el-form-item>
                <el-form-item style="font-size:18px;margin-top:10px"> <label style="font-weight:bold">作者：</label> {{dataForm1.author}} </el-form-item>
                <el-form-item style="font-size:18px;margin-top:10px"> <label style="font-weight:bold">正文：</label> {{dataForm1.text}} </el-form-item>
                <el-form-item style="font-size:18px;margin-top:10px"> 
                    <el-col :span="1.5"><span style="font-weight:bold">文档附件信息：</span></el-col>
                    <el-col :span="21"><span v-html="dataForm1.attachedFileInfo"></span></el-col>
                </el-form-item>
                <div style="height:20px"></div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
import Cookies from "js-cookie";
import DataUSA from "@/components/sub/DataUSA.vue";
// import fileDownload from 'js-file-download';
var JsFileDownload = require("js-file-download");
export default {
    components: {
        DataUSA: DataUSA
    },
    data() {
        return {
            loading: '',
            isExport: true, // 是否有导出权限
            isCheck: false, // 是否有查看权限
            activeName: 'first',
            input: '',
            dataTypeCountList: [
                {dataType: "CPI", count: 555},
                {dataType: "PPI", count: 224},
                {dataType: "平均工资", count: 90},
                {dataType: "低保", count: 1549},
                {dataType: "元器件", count: 2},
                {dataType: "原材料", count: 2},
                {dataType: "标准件", count: 2},
                {dataType: "装备经济性文件", count: 2},

            ], 
            tableData: [],
            addressDataArr: [],
            searchData: {
                searchWord: "",
                page:1, // 当前页
                size:10, // 每页多少条数据
            },
            searchUSAData: {
                searchWord: "",
                organization: "",
                page:1, // 当前页
                size:10, // 每页多少条数据
            },
            total: 0, //总共多少条数据
            dialogVisible: false,
            dataForm: {
                dataAddress: "",
                websiteName: "",
                spiderName: "",
                dataSourceType: "",
                dataType: "",
                collectionMode: "",
                collectionTime: "",
                publishTime: "",
                title: "",
                brand: "",
                model: "",
                number: "",
                specification: "",
                placeOfOrigin: "",
                materialQuality: "",
                price: "",
            },
            dialogVisible1: false,
            dataForm1: {
                dataAddress: "",
                websiteName: "",
                spiderName: "",
                dataSourceType: "",
                dataType: "",
                collectionMode: "",
                collectionTime: "",
                publishTime: "",
                title: "",
                author: "",
                text: "",
                attachedFileInfo: "",
            },
        };
    },
    methods: {
        // 数据请求
        getData() {
            // 数据管理
            this.dataTypeCountList = []
            this.$api.home.dataTypeCountList().then(res => {
                console.log(res);
                console.log('66666666666666666666666666666666666');
                this.dataTypeCountList = res.data.dataTypeCountList
            })
            // 商品数据
            this.tableData = []
            this.requestCommodity()
            // 字符串转成数组
            // let str = "https://blog.csdn.net/lijiabinbbg/article/details/93330759!@@!https://echarts.apache.org/examples/zh/index.html!@@!https://www.runoob.com/echarts/echarts-tutorial.html"
            // this.addressDataArr = str.split("!@@!")
            // console.log("address:", this.addressDataArr);
            this.$api.user.findUserRight(sessionStorage.getItem('userId')).then((res) => {
                console.log("用户权限：", res); 
                this.isExport = this.$api.common.isArrContainStr(res.data, 'kysj:data:export')
                this.isCheck = !this.$api.common.isArrContainStr(res.data, 'kysj:data:view')
            })
        },
        // 商品/装备经济 切换
        handleClick(tab, event) {
            console.log(tab.index);
            this.input = ''
            this.searchData.searchWord = ''
            this.tableData = []
            this.searchData.page = 1
            if (tab.index == 0) {
                this.requestCommodity()
            } else if (tab.index == 1){
                this.requestEconomy()
            }  else {
                this.searchUSAData.searchWord = ''
                this.requestDefense()
            }
        },
        // 搜索
        searchClick() {
            console.log('aaaaaaaaaaaaaaaaa '+this.input);
            this.searchData.searchWord = this.input
            console.log(this.searchData);
            this.tableData = []
            if(this.activeName == 'first') {
                this.requestCommodity()
            } else if(this.activeName == 'second') {
                this.requestEconomy()
            } else {
                this.searchUSAData.searchWord = this.input
                this.requestDefense()
            }
        },
        // 导出
        async downloadClick() {
            console.log(this.input);
            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let downloadUrl
            let currentTime = this.$api.common.getCurrentTime()
            if(this.input.length === 0) {
                downloadUrl = "null"
            } else {
                downloadUrl = this.input
            }
            if(this.activeName == 'first') {
                this.$api.dataManage.commodityDownload(downloadUrl).then(res => {
                    this.downloadCommon(res, "商品数据"+currentTime)
                })
            } else if(this.activeName == 'second') {
                this.$api.dataManage.economyDownload(downloadUrl).then(res => {
                    this.downloadCommon(res, "装备经济数据"+currentTime)
                })
            } else { 
                this.$api.dataManage.defenseDownload(this.searchUSAData.organization,downloadUrl).then(res => {
                    this.downloadCommon(res, "美国国防部数据"+currentTime)
                })
            }
        },
        // 查看
        //  商品
        checkClick(row) {
            console.log(row);
            this.dialogVisible = true
            this.dataForm = Object.assign({}, row);
        },
        //  装备
        checkClick1(index,row) {
            console.log(row);
            this.dialogVisible1 = true
            if(row.attachedFileInfo !== null) {
                if(row.attachedFileInfo.indexOf("!@@!") > 0) {
                    console.log("aaaaaaaaaaaaaaaaaaaaa");
                    row.attachedFileInfo = row.attachedFileInfo.replace(/!@@!/g,"<br>")
                }
            }
            this.dataForm1 = Object.assign({}, row);
        },
        // 接收传值
        getSuccess(value) {
            console.log(value);
            this.searchUSAData.organization = value
            this.input = ''
            this.searchUSAData.searchWord = ''
            this.requestDefense()
        },
        // 分页
        handleCurrentChange(val) {
            this.searchData.page = val
            if(this.activeName == 'first') {
                this.requestCommodity()
            } else {
                this.requestEconomy()
            } 
        },

        // 公共请求方法
        // 商品
        requestCommodity() {
            this.$api.dataManage.commodityFuzzySearch(this.searchData).then(res => {
                console.log(res);
                this.tableData = res.data.list
                for(let i =0;i<res.data.list.length;i++) {
                    if(res.data.list[i].dataAddress.length != 0) {
                        this.tableData[i].dataAddress1 = res.data.list[i].dataAddress.substring(0,50)+'......'
                    } 
                }
                this.total = res.data.total
            })
        },
        // 经济
        requestEconomy() {
            this.$api.dataManage.economyFuzzySearch(this.searchData).then(res => {
                console.log("装备经济性数据：",res);
                this.tableData = res.data.list
                for(let i =0;i<res.data.list.length;i++) {
                    if(res.data.list[i].text != null) {
                        this.tableData[i].text1 = res.data.list[i].text.substring(0,50)+'......'
                    }
                    if(res.data.list[i].dataAddress.length != 0) {
                        this.tableData[i].dataAddress1 = res.data.list[i].dataAddress
                    }
                    
                }
                // console.log(this.tableData)
                this.total = res.data.total
            })
        },
        // 美国国防部
        requestDefense() {
            this.$api.dataManage.economyDefenseSearch(this.searchUSAData).then(res => {
                console.log('999999999999999999996666666666666');
                console.log(res);
                this.tableData = res.data.list
                for(let i =0;i<res.data.list.length;i++) {
                    if(res.data.list[i].text != null) {
                        this.tableData[i].text1 = res.data.list[i].text.substring(0,50)+'......'
                    }
                    if(res.data.list[i].dataAddress.length != 0) {
                        this.tableData[i].dataAddress1 = res.data.list[i].dataAddress
                    }
                }
                // console.log(this.tableData)
                this.total = res.data.total
            })
        },
        // 下载
        downloadCommon(res, fileName) {
            if(res.status == 200) {
                this.loading.close();
            }
            let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;

            console.log(res);
            downloadElement.download = decodeURIComponent(res.headers["content-disposition"].split("=")[1]); //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放blob对象
        }
    },
    created:function () {
        this.$emit('header', true);
    },
    mounted(){
        this.getData()
    },
}
</script>

<style lang="less" scoped>
.dataManage {
    height: 1300px;
    background-color: #F1F9FD;

    .dataManage-tool {
        height: 265px;
        width: 98%;
        margin: 0 auto;
        // background-color: #fff99f;

        .toolsBG {
            border-radius: 2px;
            margin-top: 18px;
            width: 100%;
            height: 245px;
            background-color: #ffffff;

            .totalnum {
                width: 98%;
                margin: 0 auto 10px;
                display: flex;
                justify-content: space-between;

                .dataManage-type {
                    margin-top: 20px;
                    width: 14.5%;
                    height: 150px;
                    // line-height: 150px;
                    // text-align: center;
                    background: linear-gradient(to top,#516CFF,#9996FF);

                    .titleNum {
                        // margin-left: 20px;
                        height: 75;
                        line-height: 75px;
                        font-family: 'PingFangSC-Medium';
                        font-size: 18px;
                        color: #FFFFFF;
                        text-align: center;
                        // background-color: aqua;
                    }

                    .num {
                        // margin-left: 20px;
                        height: 75;
                        // line-height: 75px;
                        font-family: 'PingFangSC-Medium';
                        font-size: 36px;
                        color: #FFFFFF;
                        text-align: center;
                        // background-color: yellow;
                    }
                }
            }
        }  
    }

    .dataManage-table {
        // height: 1205px;
        width: 98%;
        margin: 0 auto;
        // background-color: #fff99f;

        .tableBG {
            border-radius: 2px;
            margin-top: 20px;
            width: 100%;
            padding-bottom: 20px;
            // height: 755px;
            background-color: #ffffff;

            .list {
                margin-top: 12px;
                width: 99%;
                padding: 0 13px 0;
                // margin: 0 auto;
                // background: #ebecec;
            }
        }
    }

    .el-form-item {
        font-family: 'PingFangSC-Regular';
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        line-height: 22px;
    }
 
}

</style>